<template>
  <div id="chart" style="position: relative;">
    <div class="echarts" ref="statisticsChart3" style="width: 710px;height: 450px"></div>
    <div class="legend-container" style="position: absolute; right: 55px; top: 20%; transform: translateY(-50%);height: 100px;background-color: white">
      <div style="padding: 0 10px;" class="legend-item">
        <span>Diff type</span>
      </div>
      <div  style="padding: 0 10px;" class="legend-item">
        <svg width="5" height="5">
          <rect width="5" height="5" :fill="'#ff0000'" />
        </svg>
        <span>Loss</span>
      </div>
      <div  style="padding: 0 10px;" class="legend-item">
        <svg width="5" height="5">
          <rect width="5" height="5" :fill="'#0000ff'" />
        </svg>
        <span>Gain</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getCurrentInstance, onMounted} from "vue";
import data from "@/assets/statistics/scatter.json"
import Loss from "@/assets/statistics/scatter_Loss.json"
import Gain from "@/assets/statistics/scatter_Gain.json"

export default {
  name: "statistics_chart3",
  setup() {
    const { proxy } = getCurrentInstance();
    // let [Loss,Gain] = [[],[]]
    // data.forEach(item=>{
    //   if(item.Diff_type == "Loss"){
    //     Loss.push([parseFloat(item.Meth_diff),parseFloat(item.P_value)])
    //   }else{
    //     Gain.push([parseFloat(item.Meth_diff),parseFloat(item.P_value)])
    //   }
    // })
    const option = {
      grid: {
        left: '3%',
        right: '4%',
        top: '7%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisTick: {
          alignWithLabel: true
        },
        nameLocation : 'middle',
        nameGap: 20,
        name: 'Methylation change(Alt -Ref)', // 横轴名称
      },
      yAxis: {
        type: 'value',
        name: 'ASM -log(10) P-value', // 纵轴名称
      },
      legend: {
        show: true,
        orient: 'horizontal',
        top: 'cancer',
        data: ['Loss','Gain']
      },
      series: [
        {
          symbolSize: 5,
          data: Loss,
          color:'#ff0000',
          type: 'scatter'
        },
        {
          symbolSize: 5,
          data: Gain,
          color:'#0000ff',
          type: 'scatter'
        }
      ]
    };
    onMounted(()=>{
      const myeChart = proxy.$echarts.init(proxy.$refs.statisticsChart3)
      myeChart.setOption(option)
    })
  }
}
</script>

<style scoped>
.legend-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 1px;
}

.legend-item svg {
  margin-right: 10px;
}

.legend-item span {
  font-size: 14px;
  color: #333;
}
</style>
